<van-popup class="screen-popup page-popup" v-model="ImagesClassify.PopupVisible" position="right" style="width: 100%;height: 100%;" @open="ImagesClassifyPopupOpen" @closed="ImagesClassifyPopupClosed">
	<van-nav-bar left-arrow @click-left="ImagesClassify.PopupVisible=false" title="选择收藏夹"></van-nav-bar>
	<div class="scroll-box" style="padding: 0px 4px;height: 100%;overflow: auto;padding-bottom: 35%;">
		<div class="screen-classify-collapse">
			<collect-all 
				v-if="ImagesClassify.isshowloading" 
				:parammodel="ImagesClassify" 
				:paramdata="ImagesClassify.data" 
				@select="ImagesClassifyselect" 
				:expandedkeys="ImagesClassify.expandedkeys" 
				:keyword="ImagesClassify.search.name" 
				@append="ImagesClassifyAppenddata" 
				:issearch="ImagesClassify.issearch"
				:level="0"></collect-all>
		</div>
	</div>
	<footer class="pic-toolbar footershow">
		<div class="tabbar">
			<template v-for="item in ImagesClassify.Footer">
				<template v-if="item.show">
					<div class="tab-item" @click="ImagesClassifyFooterClick(item)">
						<i :class="item.icon"></i>
					</div>
				</template>
			</template>
		</div>
	</footer>
</van-popup>
<van-popup class="seasrch-popup footer-popup" v-model="ImagesClassify.search.PopupVisible" round position="bottom" :style="{ height: '90%' }" @open="ImagesClassifySearchPopupOpen" @close="ImagesClassifySearchPopupClose">
	<div class="vam-popup-title" @click="ImagesClassify.search.PopupVisible=false">搜索</div>
	<div class="van-search-box">
		<van-search class="popup-search-input" v-model.trim="ImagesClassify.search.name" shape="round" placeholder="输入关键词" maxlength="50" :clearable="false">
			<template #right-icon>
				<van-icon v-show="ImagesClassify.search.name" @click="ImagesClassify.search.name=''" name="cross" />
			</template>
		</van-search>
	</div>
	<div class="btn-bottom">
		<van-row gutter="20">
		  <van-col span="24" style="text-align: center;">
			  <van-button round type="info" size="large" @click="ImagesClassify.search.PopupVisible=false">确定</van-button>
		  </van-col>
		</van-row>
	
	</div>
</van-popup>
<!--{template mobile/components/index/image/JsCollect}-->
<script type="text/javascript">
	var ImagesClassifyData = {
		ImagesClassify:{
			PopupVisible:false,
			data:[],
			expandedkeys:[],
			active:[],
			value:'',
			node:'',
			checkedvalue:[],
			loading:false,
			isshowloading:false,
			issearch:false,
			Footer:{
				search:{type:'search',icon:'icon ri-search-line',show:true},
				collect:{type:'collect',icon:'icon ri-star-fill',show:true},
			},
			search:{
				PopupVisible:false,
				name:'',
				realname:'',
			}
		}
	};
	var ImagesClassifyMethods = {
		ImagesClassifyAppenddata(data){
			if(data.type == 'parent'){
				this.ImagesClassify.data = data.val;
			}else{
				data.data.children = data.val;
				
			}
		},
		ImagesClassifySearchPopupClose(){
			var self = this;
			if(this.ImagesClassify.search.realname != this.ImagesClassify.search.name){
				self.ImagesClassify.isshowloading = false;
				self.ImagesClassify.expandedkeys = [];
				self.ImagesClassify.data = [];
				if(this.ImagesClassify.search.name){
					self.ImagesClassify.issearch = true;
					$.post(MOD_URL+'&op=collect&do=searchcollect',{
						keyword:self.ImagesClassify.search.name
					},function(json){
						for(var i in json.clid){
							self.ImagesClassify.expandedkeys.push('p'+json.clid[i]);
							self.ImagesClassify.active.push('p'+json.clid[i]);
						}
						for(var x in json.cids){
							self.ImagesClassify.expandedkeys.push(parseInt(json.cids[x]));
							self.ImagesClassify.active.push(parseInt(json.cids[x]));
						}
						self.$nextTick(function(){
							self.ImagesClassify.isshowloading = true;
						});
						
					},'json');
				}else{
					self.ImagesClassify.issearch = false;
					self.$nextTick(function(){
						self.ImagesClassify.isshowloading = true;
					});
				}
				
			}
		},
		ImagesClassifyFooterClick(data){
			var self = this;
			switch(data.type){
				case 'search':
					self.ImagesClassify.search.PopupVisible = true;
				break;
				case 'collect':
					if(!self.ParamImages.operation.rids.length){
						self.$notify({ type: 'warning', message: '请先选择文件' });
						return false;
					}
					if(!this.ImagesClassify.value){
						self.$notify({ type: 'warning', message: '请选择分类' });
						return false;
					}
					var param = {};
					if(self.ImagesClassify.node.parent){
						param = {
							rids:self.ParamImages.operation.rids.join(','),
							clid:self.ImagesClassify.node.clid
						}
					}else{
						param = {
							rids:self.ParamImages.operation.rids.join(','),
							clid:self.ImagesClassify.node.clid,
							cid:self.ImagesClassify.node.cid
						}
					}
					var url = 'index.php?mod=collection&op=collect&do=addfilecollect';
					$.post(url,param,function(json){
						if(json.success){
							if(self.ImagesClassify.node.parent){
								var collect = {
									name:self.ImagesClassify.node.catname,
									key:self.ImagesClassify.node.cid
								};
							}else{
								var collect = {
									name:self.ImagesClassify.node.catname,
									key:'p'+self.ImagesClassify.node.clid+'-'+self.ImagesClassify.node.pathkey.replaceAll('_','')
								};
							}
							localStorage.setItem('collectkey', JSON.stringify(collect));
							self.$notify({ type: 'success', message: '文件收藏成功' });
						}else{
							self.$notify({ type: 'warning', message: json.error });
						}
						self.ImagesClassify.PopupVisible = false;
					},'json')
				break;
			}
		},
		ImagesClassifyselect(data){
			if(this.ImagesClassify.value == data.cid){
				this.ImagesClassify.value = '';
				this.ImagesClassify.node = '';
				this.ImagesClassify.checkedvalue = [];
			}else{
				this.ImagesClassify.node = JSON.parse(JSON.stringify(data));
				this.ImagesClassify.value = data.cid;
				this.ImagesClassify.checkedvalue = [data.cid];
			}
		},
		
		ImagesClassifySearchPopupOpen(){
			var self = this;
			this.ImagesClassify.search.realname = JSON.parse(JSON.stringify(this.ImagesClassify.search.name));
		},
		ImagesClassifyPopupOpen(){
			var collectkey = JSON.parse(localStorage.getItem('collectkey'));
			if(collectkey){
				var keys = collectkey.key.split('-');
				if(keys.length>1){
					keys.pop();
				}
				var newkeys = [];
				for(var i in keys){
					if(keys[i].indexOf('p')>-1){
						newkeys.push(keys[i]);
					}else{
						newkeys.push(parseInt(keys[i]));
					}
				}
				this.ImagesClassify.expandedkeys = newkeys;
				this.ImagesClassify.active = newkeys;
			}
			this.ImagesClassify.isshowloading = true;
		},
		ImagesClassifyPopupClosed(){
			var self = this;
			this.ImagesClassify.loading = false;
			this.ImagesClassify.isshowloading = false;
			this.ImagesClassify.data = [];
			this.ImagesClassify.active = [];
			this.ImagesClassify.value = '';
			this.ImagesClassify.node = '';
			this.ImagesClassify.checkedvalue = [];
			this.ImagesClassify.search.name = '';
			this.ImagesClassify.search.realname = '';
			this.ParamImages.operation.rids = [];
		},
	};
</script>